<template>
  <div class="member-info box">
    <jdialog :title="Number(id) === 0 ? '新增员工' : '员工详情'" :visible.sync="dialogVisible" width="50%">
      <div class="create-box" style="padding: 20px;">
        <el-form :model="formDataAdd" :rules="rulesAdd" ref="formAdd" label-width="140px" class="formAdd">
          <el-form-item label="用户名" prop="username" class="formItem">
            <el-input v-model="formDataAdd.username" :disabled="disabled" placeholder="请输入用户名" type="text"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="formItem">
            <el-input v-model="formDataAdd.password" placeholder="请输入密码" type="password"></el-input>
          </el-form-item>

          <el-form-item label="邮箱" prop="email" class="formItem">
            <el-input v-model="formDataAdd.email" placeholder="请输入邮箱" type="text"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile" class="formItem">
            <el-input v-model="formDataAdd.mobile" placeholder="请输入手机号" type="text"></el-input>
          </el-form-item>
          <el-form-item label="员工名称" prop="nickName" class="formItem">
            <el-input v-model="formDataAdd.nickName" placeholder="请输入昵称" type="text"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="roleIds" class="formItem">
            <el-select v-model="formDataAdd.roleIds" multiple placeholder="请选择" @change="changeRole">
              <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="note" class="formItem">
            <el-input v-model="formDataAdd.note" placeholder="请输入备注信息" type="textarea"></el-input>
          </el-form-item>

          <el-form-item label="账号状态" prop="status" class="formItem">

            <el-radio-group v-model="formDataAdd.status">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">启用</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="服务经理" prop="serviceManager" class="formItem">

            <el-radio-group v-model="formDataAdd.serviceManager">
              <el-radio :label="0">不是</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="绑定会员id" prop="memberId" class="formItem" v-if="formDataAdd.serviceManager">
            <el-select v-model="formDataAdd.memberId" filterable remote reserve-keyword placeholder="请输入绑定会员id"
              :remote-method="getMemberList" :loading="loading">
              <el-option v-for="item in memberIdList" :key="item.id" :label="item.mobile + item.nickName"
                :value="item.id">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="服务收益比例：" prop="serviceRate">
            <el-input type="number" v-model="formDataAdd.serviceRate" size="small" placeholder="请输入服务收益比例"></el-input> %
          </el-form-item>

          <div class="manage-stores-box" style="width: 100%;">
            <p class="title-line">门店选择管理:</p>
            <div class="border-box">
              <div class="line">
                <span class="tip">选择管理门店</span>
                <el-button class="btn" size="small" type="primary" @click="onSelectStoreList">选择门店</el-button>
              </div>

              <el-table :data="manageStoreList" style="width:100%" max-height="300" :cell-style="tc"
                :header-cell-style="tccolor" class="table">
                <el-table-column label="小店名称" prop="name"></el-table-column>
                <!-- <el-table-column label="小店账号">
                  <template slot-scope="scope">
                    {{scope.row.user.mobile }}
                  </template>
</el-table-column>
<el-table-column label="缴费类型">
  <template slot-scope="scope">
                                      <p v-if="Number(scope.row.vip_shop_pay_type) === 0">无</p>
                                      <p v-else-if="Number(scope.row.vip_shop_pay_type) === 1">
                                        全额缴费
                                      </p>
                                      <p v-else-if="Number(scope.row.vip_shop_pay_type) === 2">
                                        押金缴费
                                      </p>
                                    </template>
</el-table-column>
<el-table-column label="小店状态" prop="status">
</el-table-column>
<el-table-column label="收益比例">
  <template class="" slot-scope="scope">
                                      <el-input size="mini" v-model="scope.row.service_rate" /> %
                                    </template>
</el-table-column> -->
                <el-table-column label="">
                  <template slot-scope="scope">
                    <p style="color:blue;cursor:pointer" @click="onUnbindClick(scope)">
                      移除绑定
                    </p>
                  </template></el-table-column>
              </el-table>
            </div>
            <!-- <div class="btns">
              <el-button
                class="btn"
                size="small"
                type="primary"
                @click="onSaveClick"
                >保存</el-button
              >
              <el-button class="btn" size="small" type="info" @click="onCancelClick"
                >取消</el-button
              >
            </div> -->
          </div>
          <el-form-item style="display: flex; justify-content: flex-end; width: 100%">
            <el-button type="primary" @click="submitAdd">确定</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>

      </div>
      <!-- <div class="update-box" v-else>
        <el-form
          class="update-form"
          :model="form"
          :rules="createRules"
          label-width="120px"
          ref="infoForm"
        >
          <div class="line">
            <el-form-item class="line-item" label="员工名称：">
              <span class="text">{{ form.name }}</span>
            </el-form-item>
            <el-form-item class="line-item" label="员工账号：">
              <span class="text">{{ form.mobile }}</span>
            </el-form-item>
          </div>
          <el-form-item label="创建时间：">
            <span class="text">{{ infoData.created_at }}</span>
          </el-form-item>
          <el-form-item label="关联角色：" prop="role_id">
            <el-select
              v-model="form.role_id"
              size="small"
              placeholder="请选择子账号角色"
            >
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务收益比例：" prop="service_rate">
            <el-input
              type="number"
              v-model="form.service_rate"
              size="small"
              placeholder="请输入服务收益比例"
            ></el-input> %
          </el-form-item>
        </el-form>
      </div> -->
      <div class="manage-stores-box" v-if="false">
        <p class="title-line">门店选择管理:</p>
        <div class="border-box">
          <div class="line">
            <span class="tip">选择管理门店</span>
            <el-button class="btn" size="small" type="primary" @click="onSelectStoreList">选择门店</el-button>
          </div>

          <el-table :data="manageStoreList" style="width:100%" max-height="300" :cell-style="tc"
            :header-cell-style="tccolor" class="table">
            <el-table-column label="小店名称" prop="name"></el-table-column>
            <!-- <el-table-column label="小店账号">
              <template slot-scope="scope">
                {{scope.row.user.mobile }}
              </template>
              </el-table-column>
            <el-table-column label="缴费类型">
              <template slot-scope="scope">
                <p v-if="Number(scope.row.vip_shop_pay_type) === 0">无</p>
                <p v-else-if="Number(scope.row.vip_shop_pay_type) === 1">
                  全额缴费
                </p>
                <p v-else-if="Number(scope.row.vip_shop_pay_type) === 2">
                  押金缴费
                </p>
              </template>
            </el-table-column>
            <el-table-column label="小店状态" prop="status">
            </el-table-column>
            <el-table-column label="收益比例">
              <template class="" slot-scope="scope">
                <el-input size="mini" v-model="scope.row.service_rate" /> %
              </template>
            </el-table-column> -->
            <el-table-column label="">
              <template slot-scope="scope">
                <p style="color:blue;cursor:pointer" @click="onUnbindClick(scope)">
                  移除绑定
                </p>
              </template></el-table-column>
          </el-table>
        </div>
        <div class="btns">
          <el-button class="btn" size="small" type="primary" @click="onSaveClick">保存</el-button>
          <el-button class="btn" size="small" type="info" @click="onCancelClick">取消</el-button>
        </div>
      </div>
    </jdialog>
    <jdialog title="选择门店" :visible.sync="innerDialogShow" width="800px">
      <div class="inner-dialog-box" v-loading="innerDialogLoading">
        <el-form class="search-form" :model="manageSellerForm" :rules="searchRules">
          <el-form-item prop="search">
            <el-input v-model="manageSellerForm.search" style="width:300px;margin-right:10px" size="small"
              placeholder="输入小店名称或账号搜索"></el-input>
            <el-button size="small" type="primary" @click="onSearchClick">搜索</el-button>
            <el-button style="float:right" size="small" type="primary" @click="onSelectStoreConfirmClick">保存</el-button>
          </el-form-item>
        </el-form>
        <el-table ref="storeList" :data="storeList" style="width:100%" max-height="360" :cell-style="tc"
          :header-cell-style="tccolor" class="table" @select-all="selectAll" @select="selectChange">
          <el-table-column type="selection" width="50" :selectable="selectFunc">
          </el-table-column>
          <el-table-column width="120" label="小店名称" prop="name"></el-table-column>
          <el-table-column label="小店账号" width="120" prop="memberMobile"></el-table-column>
          <el-table-column label="门店地址" prop="address"></el-table-column>
          <el-table-column label="服务经理" width="80" prop="serviceManagerName">
          </el-table-column>
          <el-table-column label="小店状态" width="80" prop="statusText">
            <!-- <template slot-scope="scope">
              <p v-if="
                Number(scope.row.vip_shop_delete_status) === 0 ||
                Number(scope.row.vip_shop_delete_status) === 3
              ">
                入驻中
              </p>
              <p v-else-if="Number(scope.row.vip_shop_delete_status) === 1">
                退出中
              </p>
              <p v-else-if="Number(scope.row.vip_shop_delete_status) === 2">
                已过期
              </p>
            </template> -->
          </el-table-column>
        </el-table>
        <el-col :span="24">
          <div class="pagination">
            <el-pagination background @current-change="pageChange" :current-page="form.page" :page-size="form.size"
              layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
          </div>
        </el-col>
      </div>
    </jdialog>
  </div>
</template>

<script>
/**
 * on-refresh-data 刷新数据的回调
 */
import {
  getMemberRoleList,
  getMemberManageStoreList,
  getAllStoreList,
  getMemberInfo,
  addMember,
  updateMember,
  adminList,
  adminUpdate,
  adminAdd,
  updatePassword,
  updateMyPassword,
  adminDelete,
  updateStatus,
  roleUpdate,
  roleListAll,
  getRole,
  adminRoleUpdate,
  adminInfo,
  roleList,
  manageSellerList,
  member_list
} from '@/api/member'
import { shopList } from '@/api/shopList'
export default {
  props: {
    //员工id 0 :新增 非0:详情

    id: {
      default: 0
    },
    action: {
      default: 1
    },
    timestamp: {
      default: ''
    },
    // 同上
    staff_uid: {
      default: 0
    },
    // 是否显示
    visible: {
      default: false
    }
  },
  data() {
    return {
      loading: false,
      dialogLoading: false,
      innerDialogLoading: false,
      innerDialogShow: false,
      // 全部的角色
      roleList: [],
      dialogVisible: false,

      manageSellerForm: {

        memberId: undefined,
        mobile: undefined,
        partnerId: sessionStorage.getItem('partnerId'),
        // sellerId: 0,
        keyword: '',
        search: '',
        pageNum: 1,
        pageSize: 15
      },
      // 编辑或者创建的form
      form: {
        name: '',
        role_id: '',
        mobile: '',
        service_rate: '',
        size: 20
      },
      searchForm: {
        shop_name: '',
        page: 1,
        size: 20
      },
      createRules: {
        name: [
          { required: true, message: '请输入员工名称或姓名', trigger: 'blur' }
        ],
        role_id: [
          { required: true, message: '请选择子账号角色', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '请输入员工手机号', trigger: 'blur' }
        ],
        service_rate: [
          { required: true, message: '请输入服务收益比例', trigger: 'blur' }
        ]
      },
      searchRules: {
        search: [
          { required: true, message: '输入小店名称或账号搜索', trigger: 'blur' }
        ]
      },
      // 该员工的数据
      infoData: {
        created_at: ''
      },
      // 该员工管理的小店列表
      manageStoreList: [],
      // 搜索的小店列表
      storeList: [],
      total: 0,
      // 记录选中的小店
      selectStoreList: [],
      checkedList: [],
      disabled: false,
      formDataAdd: {
        id: this.id,
        username: '',
        password: '',
        icon: '',
        email: '',
        nickName: '',
        note: '',
        status: 1,
        type: 3,   //类型，1：平台用户，2：合伙人用户，3小店用户
        typeText: '',
        partnerId: sessionStorage.getItem('partnerId'),
        // sellerId: undefined,
        createBy: '',
        updateBy: '',
        serviceManager: 0,
        memberId: '',
        mobile: '',
        roleIds: [],
        roleIdsText: '',
        sellerIds: [],
        serviceRate: 0
      },
      query: {
        pageNum: 1,
        pageSize: 20,
        partnerId: sessionStorage.getItem('partnerId')
      },
      memberIdList: [],
      rulesAdd: {
        username: [
          { required: true, message: '用户名必填', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '手机号必填', trigger: 'blur' },
        ],
        roleIds: [
          { required: true, message: '角色必需选择', trigger: 'change' },
        ],
      },

    }
  },
  watch: {
    dialogVisible(newV) {
      this.$emit('update:visible', newV)
      this.reset()
    },
    id(newV, oldV) {
      // this.id = newV
      this.disabled = false
      if (this.action === 1) {
        this.getMemberInfoData(this.id)
      }

    },
    timestamp(newV, oldV) {

      // console.log(newV, oldV)
      if (this.action === 1 && this.id) {
        this.getMemberInfoData(this.id)
      }

    },
    action(newV, oldV) {
      // this.id = newV
      console.log(newV, oldV)
      this.reset()

    },

    visible(newV) {
      this.dialogVisible = newV
      if (newV) {
        this.$refs['formAdd'].clearValidate()
        this.infoData = {
          created_at: ''
        }
        this.manageStoreList = []
        this.selectStoreList = []
        this.form = {
          name: '',
          role_id: '',
          mobile: '',
          service_rate: '',
          size: 20
        }

        // if (this.id) {
        //   // 获取用户数据
        //   this.getMemberInfoData(this.id)
        //   this.getStoreManageList()
        // } else {
        //   this.checkedList = []
        // }
      }
    }
    // checkedList(newValue) {
    //   this.selectList = newValue.map(item => {
    //     item.service_rate = ''
    //     item.shop_user = {
    //       mobile: item.phone
    //     }
    //     item.status
    //     item.shop_user.mobile = item.phone
    //     return
    //   })
    // }
  },
  created() {
    console.log(this.id, '用户ID')
    // if(this.id){
    //   this.getMemberInfoData()
    // }
    this.dialogVisible = this.visible
    this.getRoleList()

  },
  beforeDestroy() {
    // 组件即将销毁，你可以在这里执行清理工作
    console.log('组件即将销毁');
  },
  destroyed() {
    // 组件已销毁，此时DOM已经被移除
    console.log('组件已销毁');
  },
  methods: {

    reset() {
      this.formDataAdd = {
        id: this.id,
        username: '',
        password: '',
        icon: '',
        email: '',
        nickName: '',
        note: '',
        status: 1,
        type: 3,   //类型，1：平台用户，2：合伙人用户，3小店用户
        typeText: '',
        partnerId: sessionStorage.getItem('partnerId'),
        // sellerId: 0,
        createBy: '',
        updateBy: '',
        serviceManager: 0,
        memberId: '',
        mobile: '',
        roleIds: [],
        roleIdsText: '',
        sellerIds: [],
        serviceRate: 0
      }
    },
    // 取消
    cancel() {
      this.dialogVisible = false
      this.reset()
      // this.formData = {
      //   id: 0,
      //   username: '',
      //   oldPassword: '',
      //   password: '',
      //   confirmPassword: ''
      // }
    },
    changeType(e) {
      console.log(e, this.typeList.find(item => item.id == e).name)
      this.formDataAdd.type = e
      this.formDataAdd.typeText = this.typeList.find(item => item.id == e).name
    },
    changeRole(e) {
      console.log(e, this.formDataAdd.roleIds)

    },
    // 获取角色列表
    getRoleList() {
      roleList(this.query).then(res => {
        if (res.code === 200) {
          // res.data.data.forEach(item => {
          //   item.last_time_text = item.last_time || '无'
          // })
          console.log(res)
          this.roleList = res.data.list
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //获取角色
    getRoleData() {
      getMemberRoleList().then(res => {
        if (res.code === 200) {
          this.roleList = res.data.data || []
        }
      })
    },
    // 搜索指定会员id
    getMemberList(e) {
      console.log(e)
      if (e) {
        let data = {
          keyword: e
        }
        member_list(data).then(res => {
          console.log(res.data.list)
          this.memberIdList = res.data.list
        })
      }

    },
    getMemberInfoData(id) {
      // console.log(this.timestamp)
      this.disabled = true
      this.dialogLoading = true
      adminInfo(id).then(res => {
        this.dialogLoading = false
        if (res.code === 200) {
          this.infoData = res.data
          this.formDataAdd = res.data
          this.formDataAdd.password = ''
          this.checkedList = res.data.sellerList || []
          this.manageStoreList = res.data.sellerList || []
          this.getStoreList()
        } else {
          this.$message.error(res.message)
        }
      })

    },
    // 获取用户管理的店
    getStoreManageList() {
      getMemberManageStoreList({ staff_id: this.staff_uid }).then(res => {
        if (res.code === 200) {
          res.data.data && res.data.data.map(item => {
            item.status = this.$moment(item.service_time_end).valueOf() > new Date().getTime() ? '入驻中' : '已过期'
          })
          this.manageStoreList = res.data.data || []
          this.checkedList = [].concat(res.data.data) || []
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 显示所有的店以供选择
    onSelectStoreList() {
      //将当前员工的店同步到已选择的list中
      this.selectStoreList = []
      for (const v of this.manageStoreList) {
        this.selectStoreList.push(Object.assign({ isChecked: true }, v))
      }
      this.innerDialogShow = true

    },
    onUnbindClick(item) {
      this.manageStoreList.splice(item.$index, 1)
      this.checkedList.splice(item.$index, 1)
    },
    onSaveClick() {
      const shops = []
      this.manageStoreList.forEach(item => {
        shops.push({
          shop_id: item.id,
          shop_uid: item.uid,
          service_rate: item.service_rate
        })
      })

      this.$refs['infoForm'].validate(valid => {
        if (this.form.service_rate > 100 || this.form.service_rate < 0) {
          this.$message.error('服务收益比例在0到100之间')
          return
        }
        if (valid) {
          this.dialogLoading = true
          if (this.id === 0) {
            addMember(
              Object.assign({}, this.form, { shops: JSON.stringify(shops) })
            ).then(res => {
              this.dialogLoading = false
              if (res.code === 10000) {
                this.$message.success('创建成功')
                this.$emit('on-refresh-data')
                this.dialogVisible = false
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            updateMember(
              Object.assign({
                name: this.form.name,
                role_id: this.form.role_id,
                mobile: this.form.mobile,
                service_rate: this.form.service_rate,
                id: this.id,
                shops: JSON.stringify(shops)
              })
            ).then(res => {
              this.dialogLoading = false
              if (res.code === 10000) {
                this.$message.success('编辑成功')
                this.$emit('on-refresh-data')
                this.dialogVisible = false
              } else {
                this.$message.error(res.message)
              }
            })
          }
        } else {
          return false
        }
      })
    },
    onCancelClick() {
      this.dialogVisible = false
    },
    onSearchClick() {
      this.searchForm.page = 1
      this.getStoreList()
    },
    //完成小店list的选择
    onSelectStoreConfirmClick() {
      // 同步到manageStoreList
      this.manageStoreList = [].concat(this.checkedList)

      let arr = []
      this.checkedList.forEach(item => {
        arr.push(item.id)
      })
      // console.log(arr, '############')
      this.formDataAdd.sellerIds = arr
      // this.manageStoreList.forEach(item => {
      //   item.status = this.$moment(item.service_time_end).valueOf() > new Date().getTime() ? '入驻中' : '已过期'
      // })
      // const arr =[].concat(this.checkedList)
      // arr.map(item => {
      //   item.shop_user = {
      //     mobile: item.user.mobile
      //   }
      //   item.shop = {
      //     vip_shop_pay_type: item.vip_shop_pay_type
      //   }
      // })
      // this.manageStoreList = arr
      this.innerDialogShow = false
    },
    selectFunc(row) {
      // console.log(row, '22222222222222')
      return !row.is_bind && Number(row.status) !== 1
    },
    selectAll(selection) {
      if (selection.length === 0) {
        this.storeList.forEach((item) => {
          const index = this.checkedList.findIndex(store => {
            return store.id === item.id
          })
          if (index !== -1) {
            this.checkedList.splice(index, 1)
          }
        })
      } else {
        this.storeList.forEach(item => {
          const store = this.checkedList.find(store => {
            return item.id === store.id
          })
          if (!store) {
            const shop = Object.assign({}, item)
            shop.service_rate = shop.shop_service_rate || ''
            this.checkedList.push(shop)
          }
        })
      }
    },
    selectChange(selection, row) {
      const index = selection.findIndex(item => {
        return item && item.id === row.id
      })
      if (index !== -1) {
        const shop = Object.assign({}, row)
        shop.service_rate = shop.shop_service_rate || ''
        this.checkedList.push(shop)
      } else {
        const index = this.checkedList.findIndex(item => {
          item.id === row.id
        })
        this.checkedList.splice(index, 1)
      }
    },
    onCheckboxChange(item) {
      const isChecked = item['isChecked']
      if (isChecked) {
        this.selectStoreList.push(item)
        return
      }
      const index = this.selectStoreList.findIndex(v => {
        return item.id === v.id
      })
      if (index !== -1) {
        this.selectStoreList.splice(index, 1)
      }
    },
    pageChange(page) {
      this.searchForm.page = page
      this.getStoreList()
    },
    // 搜索所有的小店
    getStoreList() {
      this.innerDialogLoading = true
      manageSellerList(this.manageSellerForm).then(res => {
        this.innerDialogLoading = false
        if (res.code === 200) {
          const list = res.data.list || []
          list.forEach(item => {
            item.is_bind = false
          })
          this.storeList = list
          // let arr = []
          // list.forEach(item => {
          //   if (this.checkedList.includes(item.id))
          //     // item.is_bind = true
          //     arr.push(item)
          // })

          // this.manageStoreList = arr
          // this.checkedList = arr

          this.total = res.data.total
          this.$nextTick(function () {
            this.$refs.storeList.clearSelection()
            this.checkedList.forEach(v => {
              const item = this.storeList.find(item => {
                return item.id === v.id
              })
              if (item) {
                this.$refs.storeList.toggleRowSelection(item, true)
              }
            })
          })
        } else {
          this.$message.error(res.message)
        }
      })
    },
    tc() {
      return 'text-align:center; color:#333333; font-size:12px;'
    },
    tccolor() {
      return 'text-align:center;background-color:#f5f5f5; font-size:14px;'
    },
    // 新增
    submitAdd() {
      // console.log(this.formDataAdd, 'this.formDataAdd')
      // return
      this.$refs['formAdd'].validate(valid => {
        console.log(this.formDataAdd.serviceManager, 'valid')
        if (valid) {

          if (this.formDataAdd.serviceManager) {
            if (!this.formDataAdd.memberId) {
              this.$message.error('请输入绑定会员id')
              return false
            }
            // this.formDataAdd.memberId ? '' : this.$message.error('请输入绑定会员id')

          }
          // console.log(this.formDataAdd)
          if (this.formDataAdd.id) {
            adminUpdate(this.formDataAdd).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success('修改成功')
                this.reset()
                this.$emit('on-refresh-data')
                this.dialogVisible = false
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            if (this.formDataAdd.password.length < 8) {
              this.$message.error('密码至少为8个字符')
              return false
            }
            adminAdd(this.formDataAdd).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success('创建成功')
                this.reset()
                this.$emit('on-refresh-data')
                this.dialogVisible = false
              } else {
                this.$message.error(res.message)
              }
            })
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.box {
  ::v-deep .el-input {
    width: 60%;
  }
}

.create-box {
  .create-form {
    /* padding-right: 220px;*/
    position: relative;
  }
}

.update-box {
  .update-form {
    padding-right: 220px;
    position: relative;

    .el-form-item {
      margin-bottom: 20px;
    }

    .line {
      display: flex;

      .line-item {
        flex: 1;
      }
    }
  }
}

.manage-stores-box {

  padding: 0 20px 20px;

  .title-line {
    height: 36px;
    line-height: 36px;
  }

  .border-box {
    border: 1px solid #ddd;

    .line {
      height: 42px;
      display: flex;
      align-items: center;

      .tip {
        margin: 0 8px;
      }
    }
  }

  .btns {
    margin-top: 10px;
    text-align: center;

    .btn:first-child {
      margin-right: 10px;
    }
  }
}

.inner-dialog-box {
  padding: 20px;
  overflow: hidden;

  .pagination {
    float: right;
    margin-top: 12px;
  }
}

.formAdd {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .formItem {
    width: 50%;
  }
}
</style>
